<template>
    <el-drawer
            title="车位分配"
            :visible.sync="table"
            direction="ltr"
            size="50%">
        <el-input placeholder="主键" v-model="parkname" v-show="false"></el-input>
        <div class="list">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    border
                    stripe
                    align="center"
                    tooltip-effect="dark"
                    :header-cell-style="{'background':'#eef1f6','color':'#1f2d3d','border-color':'#dfe6ec'}"
                    style="width: 700px;font-size: 14px;color: #1f2d3d;margin: auto"
                    v-loading="loading"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        align="center"
                        width="60">
                </el-table-column>
                <el-table-column
                        type="index"
                        label="序号"
                        align="center"
                        width="65">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户账号"
                        align="center"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="homeaddress"
                        label="家庭住址"
                        show-overflow-tooltip
                        min-width="15%"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        min-width="10%"
                        :formatter="typeFormatter"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="parkname"
                        label="车位"
                        show-overflow-tooltip
                        min-width="12%"
                        align="center">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination @current-change="handleCurrentChange"
                               layout="total, sizes,prev, pager, next, jumper"
                               :current-page.sync="iPagination.current"
                               :page-size='iPagination.pageSize'
                               :page-sizes="iPagination.pageSizeOptions"
                               :total="iPagination.total"
                               @size-change="handleSizeChange">
                </el-pagination>
            </div>
        </div>
        <div class="foot">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="define" :loading="loading">确定</el-button>
        </div>
    </el-drawer>
</template>

<script>
    export default {
        name: "shareDialog",
        data(){
            return{
                formData:{},
                parkname: '',
                table: false,
                tableData: [],
                loading: false,
                iPagination: {
                    current: 1,
                    pageSize: 10,
                    pageSizeOptions: [5, 10, 20, 30],
                    total: 0,
                    "page": 0,
                    "pageSize": 10,
                },
                multipleSelection: [],
                username:'',
            }
        },
        created(){
          this.getData()
        },
        methods:{
            init(row){
                this.parkname = row.parkname
                this.formData = row
            },
            // 分页
            handleCurrentChange (val) {
                this.iPagination.current = val;
                this.getData()
            },
            handleSizeChange (val) {
                this.iPagination.current = 1;
                this.iPagination.pageSize = val;
                this.getData()
            },
            getData(){
                this.loading = true;
                this.$Axios({
                    url: '/users/getUsersData',
                    method: 'get',
                    data:{
                        currPage: this.iPagination.current - 1,
                        pageNum: this.iPagination.pageSize,
                    },
                    success:(result)=>{
                        this.tableData = result.data;
                        this.iPagination.total = result.total;
                        setTimeout(() => {
                            this.loading = false;
                        }, 200);
                    }
                })
            },
            // 取消
            cancel(){
                this.table = false
            },
            // 选择按钮
            handleSelectionChange(val) {
                // if(this.multipleSelection.length>0){
                //     this.$message({
                //         type: 'warning',
                //         message: '已选择分配车位，不可多选'
                //     })
                // }else {
                //
                // }
                // 单选
                if (val.length > 1) {
                    this.$refs.multipleTable.clearSelection();
                    this.$refs.multipleTable.toggleRowSelection(val.pop())
                }else {
                    this.multipleSelection = val;
                }
                console.log(this.multipleSelection, 222)
            },
            // 分配车位
            define(){
                this.$confirm('确定分配该车位？', '提示', {
                    type: 'warning',
                }).then(()=>{
                    this.$axiosToken({
                        url: '/users/updateParkStatus',
                        method: 'post',
                        data:{
                            u_id: this.multipleSelection[0].id,
                            parkId: this.formData.id,
                            parkname: this.parkname,
                            parkstatus: 1,
                        },
                        success: (result) =>{
                            this.$message({
                                message: '分配车位成功',
                                type: 'success',
                                duration: 2000
                            });

                            this.$axiosToken({
                                url: '/parking/editParkData',
                                method: 'post',
                                data:{
                                    u_id: this.formData.id,
                                    parkname: this.formData.parkname,
                                    parkpay: this.formData.parkpay,
                                    parktype: this.formData.parktype,
                                    parkstatus: 1,
                                },
                                success: (result)=>{
                                    this.$parent.getParkData()
                                }
                            });
                            this.cancel()
                        }
                    })
                })
            },
            // 状态转为文字
            typeFormatter(row,column){
                const type = row.type
                if (type == 1){
                    return '管理员'
                }else {
                    return '普通用户'
                }
            },
        }
    }
</script>

<style scoped>
    .block{
        float: right;
        margin-top: 20px;
        margin-right: 30px;
    }
    /deep/ .el-input.el-input--mini.el-input--suffix>.el-input__inner{
        height: 28px;
    }
    .foot{
        width: 100%;
        margin-top: 15%;
    }
    /deep/.el-button{
        margin-left: 80px;
        font-size: 14px;
        width: 30%;
    }
    /deep/.el-drawer__header>:first-child {
        flex: 1;
        font-weight: bold;
        color: black;
        font-size: 20px;
    }

</style>